<template>
	<div id="l1"></div>
</template>

<script>
import { Chart } from '@antv/g2'
export default {
	data() {
		return {
			year: [
				{ year: '1991', value: 3 },
				{ year: '1992', value: 4 },
				{ year: '1993', value: 3.5 },
				{ year: '1994', value: 5 },
				{ year: '1995', value: 4.9 },
				{ year: '1996', value: 6 },
				{ year: '1997', value: 7 },
				{ year: '1998', value: 9 },
				{ year: '1999', value: 13 },
			],
		}
	},
	mounted() {
		this.initLineChart()
	},
	methods: {
		initLineChart() {
			const chart = new Chart({
				container: 'l1',
				autoFit: true,
				height: 500,
			})
			chart.data(this.year)
			chart.scale({
				year: {
					range: [0, 1],
				},
				value: {
					min: 0,
					nice: true,
				},
			})
			chart.tooltip({
				showCrosshairs: true, // 展示 Tooltip 辅助线
				shared: true,
			})
			chart.line().position('year*value').label('value')
			chart.point().position('year*value')
			chart.render()
		},
	},
}
</script>
